<template>
  <div class="ad">
      <div class="ad-title">候选人</div>
      <span class="ad-button" @click ="handleFile">导入候选人表</span>
      <span class="ad-button" @click="handleInsert">新增候选人</span>
      <span class="ad-button" @click="handleDelete">
        删除候选人
      </span>
      <div class="table">
          <tr v-if="this.listTitle.length">
             <th class="table-item" v-for="(item, index) of listTitle" :key="index" :class="{appear: item === 'cId'}">{{item}}</th>
              <th class="table-item" v-for="(item, index) of listTitle2" :key="item" :class="{appear: item === 'cId'}">{{item}}</th>
             <th class="table-item">编辑</th>
             <th class="table-item delete">选择</th>
          </tr>
          <tr v-for="(person, index) of listData" :key="index" ref="index">
             <th class="table-item" v-for="(item, key, index) of person"
             :key="key" :class="[{appear: key === 'cId'},
             {file: index + 1 >= listTitle.length - flen}]">
                  <span @click = "handlelookClick(item, index)">{{item}}</span>
              </th>
             <!-- <th class="table-item alter">预览</th> -->
             <th class="table-item alter" @click="handleAlter(person,index)">修改用户信息</th>
             <th class="table-item delete">
                  <input type="checkbox" value="checked"
                  v-model="select[index]"
                  @click="handleSelectClick(index)"
                  :ref="index">
             </th>
          </tr>
      </div>
  </div>
</template>

<script>
import axios from 'axios'
import { mapState } from 'Vuex'
export default {
  name: 'CandidateList',
  props: {
    listData: Array,
    listTitle: Array,
    listTitle2: Array,
    flen: Number || String
  },
  data () {
    return {
      select: [],
      delete: []
      // listData: this.listData,
      // titleList: this.listTitle
    }
  },
  methods: {
    handleInsert () {
      this.$emit('insert')
    },
    handleFile () {
      this.$emit('file')
    },
    handleAlter (item, index) {

      this.$emit('alter', item, index)
      // console.log(item, index)
    },
    handlelookClick (item, index) {
      // console.log(this.flen)
      // axios.get('http://192.168.43.188:8081/preview?file=' + item).then(data =>{
      //   console.log(data)
      // })
      if (index + 1 >= this.listTitle.length - this.flen) {
        // var url = 'http://192.168.43.188:8081/preview?filename=' + item //预览文件的访问地址,后端插件
        var url = 'http://192.168.43.188:8080/file/' + item
        window.open('http://192.168.43.188:8012/onlinePreview?url='+encodeURIComponent(url))
      } else {
        return;
      }
    },
    handleSelectClick (index) {
      this.select[index] = !this.select[index] === true
      if (this.select[index]) {
        this.$refs.index[index].style.background = '#41E1D1'
        // console.log(this.$refs.index[index])
        this.$refs[index][0].checked = true
      } else {
        this.$refs.index[index].style.background = '#fff'
        this.$refs[index][0].checked = false
      }
    },
    handleDelete () {
      if (!this.select.length) {
        swal('亲，您还没有选中数据呢！', '', 'error')
      } else {
        const verify = confirm('亲，您是否确定删除这(些)用户呢！请慎重考虑')
        if (verify) {
          this.select.forEach((value, index) => {
            if (value) {
              this.delete.push(this.listData[index])
              // console.log(this.delete)
            }
          })
          const arr = []
          this.delete.forEach((item, index) => {
            arr[index] = item.cId
          })
          // console.log(arr)
          axios.post('http://192.168.43.188:8081/deleteCandidates', {
            'id': this.userId,
            'arr': arr
          })
            .then(({status, data}) => {
              if (status === 200) { // 这几行代码不能换成三等号
                // console.log(data)
                if (data.msg[0] == '111') { // eslint-disable-line
                  swal('删除成功', '', 'success')
                  this.removeItem()
                } else if (data.msg[0] == '000') { // eslint-disable-line
                  swal('找不到该用户名', '', 'error')
                } else if (data.msg == '110') { // eslint-disable-line
                  swal('管理员id错误')
                } else if (data.msg == '010') { // eslint-disable-line
                  swal('该用户名的密码错误', '', 'error')
                }
              }
            }).catch((error) => {
              swal('Info' + error, '', 'error')
            })
        }
      }
    },
    removeItem () {
      this.delete.forEach(() => { // 保证循环次数
        this.select.forEach((value, index) => {
          if (value) {
            // console.log(this.listData[index])
            this.listData.splice(index, 1)
            this.select.splice(index, 1)
            this.$emit('handleDelete')
            this.handleSelectClick(index) // 双重使用恢复正常。
            this.handleSelectClick(index)
          }
        })
      })
      this.delete = []
    }
  },
  computed: {
    ...mapState(['userId'])
  }
}
</script>

<style lang="stylus" scoped>
@import '~style/variable.styl'
.ad
    margin-top: .2rem
    text-align: center
    padding: 0 .5rem
    .ad-title
        background: $bgcolor
        color: #fff
        line-height: $height
        text-align: center
        margin-bottom: .5rem
    .ad-button
        overflow: hidden
        // display: block
        background: $bgcolor
        font-size: .32rem
        padding: .2rem .4rem
        margin: .2rem
        border-radius: .1rem
    .table
        margin-top: .5rem
        width: 100%
        .table-item
            border: .02rem solid #aaa
            width: 4.5rem
            // width: 23.95% /* 设置百分比失效 */
            height: .5rem
            line-height: .5rem
            padding: .2rem .0rem
        .alter
            color: $bgcolor
        .delete
            width: 2rem
        .appear
           display: none
        .file
           color: $tintRed
</style>
